<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>个人中心</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		body {
			background: #F0F1F2;
		}

		.personal-wraper {
			height: 100vh;
			background: #f0f1f2;
		}

		.personal-wraper .cont-wraper {
			padding: 0 0.15rem;
			background: #ffffff;
		}

		.personal-wraper .cont-wrape .item-avatar {
			padding: 0.08rem 0;
		}

		.personal-wraper .cont-wraper .item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(230, 230, 230, 0.5);
			padding: 0.17rem 0;
		}

		.personal-wraper .cont-wraper .item .left {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(77, 77, 77, 1);
			line-height: 0.21rem;
		}

		.personal-wraper .cont-wraper .item .right {
			display: flex;
			align-items: center;
		}

		.personal-wraper .cont-wraper .item .right .avatar {
			width: 0.4rem;
			height: 0.4rem;
			border-radius: 50%;
			margin-right: 0.1rem;
		}

		.personal-wraper .cont-wraper .item .right span {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 0.21rem;
			margin-right: 0.1rem;
		}

		.personal-wraper .cont-wraper .item .right .arrow {
			width: 0.08rem;
			height: 0.12rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="personal-wraper">
			<!--  -->
			<div class="cont-wraper">
				<!-- 头像 -->
				<div class="item item-avatar" tapmode @click="sel_pic()">
					<div class="left">头像</div>
					<div class="right">
						<img :src="avatar" alt class="avatar" />
						<img src="../../image/icons/list-arrow-right.png" alt class="arrow" />
					</div>
				</div>

				<!-- 昵称 -->
				<div class="item" tapmode onclick="change_nickname()">
					<div class="left">用户名称</div>
					<div class="right">
						<span v-text="nickname"></span>
						<img src="../../image/icons/list-arrow-right.png" alt class="arrow" />
					</div>
				</div>

				<!-- 性别 -->
				<div class="item" tapmode onclick="open_sel_sex()">
					<div class="left">性别</div>
					<div class="right">
						<span v-text="sex">保密</span>
						<img src="../../image/icons/list-arrow-right.png" alt class="arrow" />
					</div>
				</div>

				<!-- 出生日期 -->
				<div class="item" tapmode @click="sel_date">
					<div class="left">出生日期</div>
					<div class="right">
						<span>{{info.birthday==''?'未设置':info.birthday}}</span>
						<img src="../../image/icons/list-arrow-right.png" alt class="arrow" />
					</div>
				</div>

				<!-- 长辈生日提醒 -->
				<div class="item" style="border-bottom:none" onclick="open_win('my_birthdaytip', './my_birthdaytip.html', false)">
					<div class="left">长辈生日提醒</div>
					<div class="right">
						<img src="../../image/icons/list-arrow-right.png" alt class="arrow" />
					</div>
				</div>

			</div>
		</div>

	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			nickname: '未设置',
			remark: '请输入个人简介',
			sex: '保密',
			birthday: "",
			avatar: '../../image/icon/avatar.png',
			info: {}
		},

		methods: {
			get_userinfo: function() {
				get_data('api/user/getUserInfo', {
					token: $api.getStorage('token')
				}, function(ret) {
					// alert(JSON.stringify(ret)) 查看接口数据
					if (ret.status) {
						save_userinfo_new(ret)
						vm.userInfo = ret.data;
						vm.nickname = ret.data.nickname == '' ? '请输入昵称' : ret.data.nickname
						vm.remark = ret.data.remark == '' ? '请输入个人简介' : ret.data.remark
						vm.avatar = ret.data.avatar ? ret.data.avatar : vm.avatar
						vm.sex = ret.data.sex == '2' ? '保密' : ret.data.sex == '1' ? '男' : '女'
						vm.birthday = ret.data.birthday
					}
				})
			},
			updateUserInfo: function(el, val) {
				var data = {
					token: $api.getStorage('token'),
				}
				data[el] = val
				get_data('api/user/updateUserInfo', data, function(ret) {
					if (ret.status) {
						send_event('logined')
					}
				})
			},
			sel_pic: function() {
				getHasPermission('camera', function(ret) {
						if (ret) {
							getHasPermission('photos', function(ret) {
								if (ret) {
									getHasPermission('storage', function(ret) {
										if (ret) {
												select_pic_avater(function(ret) {

												})
										} else {
											toast('获取存储权限失败')
										}
									})
								} else {
									toast('获取相册权限失败')
								}
							})
						} else {
							toast('获取相机权限失败')
						}
					})
			},
			get_list: function() {
				get_data('api/User/birthdayList', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.info = ret.data
					}
				})
			},
			sel_date: function() {
				if(api.systemType == 'ios'){
					api.openPicker({
						type: 'date',
						title: '出生日期'
					},
					function(ret, err) {
						if(ret) {
							var str = ret.year + '-' + ret.month + '-' + ret.day;
							vm.info.birthday = str;
							get_data('api/user/updateUserInfo', {
								token: $api.getStorage('token'),
								birthday: str
							}, function(ret) {
								if(ret.status) {}
							})
						} else {
							console.log(JSON.stringify(err));
						}
					});
				}else{
					var actionDialog = api.require('UIActionDialog');
					// alert(JSON.stringify(actionDialog))

					actionDialog.datePicker({
						styles: {
							navigator: {
								h: 55,
								divider: '#005A93',
								dividerSize: 0.3,
								titleColor: '#000000',
								title: '出生日期',
								divider: '#EEEEEE',
								bg: '#FFFFFF',
								dividerSize: 0.3,
								titleSize: 17,
							},
							leftBtn: {
								title: '取消',
								bg: '#FFFFFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
								titleSize: 15, //（可选性）数字类型；按钮标题文本字体大小；默认：12
								titleColor: '#999999', //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
							},
							rightBtn: {
								title: '完成',
								bg: '#FFFFFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
								titleSize: 15, //（可选性）数字类型；按钮标题文本字体大小；默认：12
								titleColor: '#005A93', //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
							},
							content: { //（可选项）JSON对象；选择器区域样式配置
								h: 257, //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：220
								bg: '#FFFFFF', //（可选项）字符串类型；选择器背景，支持rgb、rgba()、#、img；默认：#F5F5F5
								size: 17, //（可选性）数字类型；滚轮显示文字大小；默认：16
								active: '#000000', //（可选项)字符串类型；滑到选中位置后的文本颜色，支持rgb、rgba、#；默认：#ff0000
								inactive: '#00000', //（可选项)字符串类型；滑到非选中位置后的文本颜色，支持rgb、rgba、#；默认：#00000
								divider: '#EEEEEE', // (可选项)字符串类型；选中项上下分隔线的颜色，支持rgb、rgba、#，不传不显示；默认：不显示
								dividerSize: 0.3, // (可选项)数字类型；选中项上下分隔线的粗细；默认：0.5
								row: 5, //（可选项）数字类型；显示几行；默认：5
								fromYears: 1919, //（可选项）数字类型；开始年份；默认：当前年份之前100年
								toYears: 2119 //（可选项）数字类型；终止年份；默认：当前年份之后100年
							}
						},
						mask: 'rgba(0,0,0,0.6)',
						selected: '2019-5-29',
						animation: true
					}, function(ret) {
						console.log(JSON.stringify(ret));
						if (ret.eventType == 'left') {
							actionDialog.close();
						} else if (ret.eventType == 'right') {
							var str = ret.selected;
							vm.info.birthday = ret.selected;
							get_data('api/user/updateUserInfo', {
								token: $api.getStorage('token'),
								birthday: str
							}, function(ret) {
								if (ret.status) {}
							})
							actionDialog.close();
						} else if (ret.eventType == 'mask') {
							actionDialog.hide();
						}
					});
				}


			}
		}
	})
	var dialog = new auiDialog();

	apiready = function() {
		add_event('personal_profile', function(ret) {
			vm.get_userinfo()
		})
		add_event('destPath', function(ret) {
			vm.get_userinfo()
			vm.get_list()
		})
		vm.get_userinfo()
		vm.get_list()
	};

	// 修改昵称
	function change_nickname() {
		// dialog.prompt({
		// 	title: "修改昵称",
		// 	text: vm.nickname,
		// 	type: 'text',
		// 	buttons: ['取消', '确定'],
		// 	lable: true,
		// 	lable_txt: '4-12个字符，不包含空格'
		// }, function(ret) {
		// 	if (ret.buttonIndex == 2) {
		// 		if (ret.text != '') {
		// 			if (ret.text.length < 4) {
		// 				// toast('昵称不能少于2个字符或汉字');
		// 				alert('昵称只能为4-12个字符');
		// 				return;
		// 			}
		// 			if (ret.text.length > 12) {
		// 				// toast('昵称不能多于12个字符或汉字');
		// 				alert('昵称只能为4-12个字符');
		// 				return;
		// 			}
		// 			if (ret.text.indexOf(" ") != -1) {
		// 				// toast('昵称不能包含空格');
		// 				alert('昵称不能包含空格');
		// 				return;
		// 			}
		// 			vm.nickname = ret.text
		// 			vm.updateUserInfo('nickname', vm.nickname)
		// 		}
		// 	}
		// })


		var dialogBox = api.require('dialogBox');
		dialogBox.inputbox({
			keyboardType: 'default',
			texts: {
				title: '修改昵称',
				placeholder: '4-12个字符，不包含空格',
				leftBtnTitle: '取消',
				rightBtnTitle: '确定'
			},
			styles: {
				bg: '#fff',
				corner: 10,
				w: 295,
				h: 183,
				title: {
					h: 24,
					alignment: 'center',
					size: 17,
					color: '#444444',
					marginT: 20,
				},
				input: {
					h: 45,
					marginT: 18,
					marginLeft: 30,
					marginRight: 30,
					textSize: 17,
					textColor: '#666666',
					bg: '#F6F6F6',
					corner: 3,
					alignment: 'left',
					verticalCenter: true,
				},
				dividingLine: {
					width: 0,
					color: '#696969',
				},
				left: {
					h: 55,
					bg: '#FFFFFF',
					color: '#999999',
					size: 16
				},
				right: {
					h: 55,
					bg: '#FFFFFF',
					color: '#005A93',
					size: 16
				},
				horizontalLine: {
					color: '#EEEEEE', //（可选项）字符串类型；左右按钮上边横线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
					height: 1 //（可选项）数字类型；左右边按钮横线的高度；默认：0
				},
				verticalLine: {
					color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
					width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0

				},
			}
		}, function(ret) {
			// api.alert({
			// 	msg: JSON.stringify(ret)
			// });
			if (ret.eventType == 'left') {
				var dialogBox = api.require('dialogBox');
				dialogBox.close({
					dialogName: 'input'
				});
			};

			if (ret.eventType == 'right') {
				var dialogBox = api.require('dialogBox');
				if (ret.text != '') {
					if (ret.text.length < 4) {
						// toast('昵称不能少于2个字符或汉字');
						toast('昵称只能为4-12个字符');
						return;
					}
					if (ret.text.length > 12) {
						// toast('昵称不能多于12个字符或汉字');
						toast('昵称只能为4-12个字符');
						return;
					}
					vm.nickname = ret.text
					vm.updateUserInfo('nickname', vm.nickname)
				} else {
					toast('昵称不能为空');
					return;
				}
				dialogBox.close({
					dialogName: 'input'
				});
			};

		});


	}



	// 修改个人简介
	// function change_remark() {
	// 	dialog.prompt({
	// 		title: "修改个人简介",
	// 		text: vm.remark,
	// 		type: 'text',
	// 		buttons: ['取消', '确定'],
	// 		lable: true,
	// 		lable_txt: '2-20个字符，不包含空格'
	// 	}, function(ret) {
	// 		if(ret.buttonIndex == 2) {
	// 			if(ret.text != '') {
	// 				if(ret.text.length < 2) {
	// 					toast('签名不能少于2个字符或汉字');
	// 					return;
	// 				}
	// 				if(ret.text.length > 20) {
	// 					toast('签名不能多于20个字符或汉字');
	// 					return;
	// 				}
	// 				if(ret.text.indexOf(" ") != -1) {
	// 					toast('签名不能包含空格');
	// 					return;
	// 				}
	// 				vm.remark = ret.text
	// 				vm.updateUserInfo('remark', vm.remark)
	// 			}
	// 		}
	// 	})
	// }

	// 修改性别
	function open_sel_sex() {
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas: [{
				"name": '女',
				"id": '0'
			}, {
				"name": '男',
				"id": '1'
			}, {
				"name": '保密',
				"id": '2'
			}],
			layout: {
				row: 3,
				col: 1,
				height: 50,
				size: 13,
				sizeActive: 15,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#fff',
				color: '#999',
				colorActive: '#999',
				colorSelected: '#999',
				leftMargin: 35, //（可选项）数字类型；选择器分割线的左边距；默认：0
				rightMargin: 35,
				color: '#222222',
				colorSelected: '#222222'
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#999',
				colorActive: '#999'
			},
			ok: {
				text: '完成',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#005A93',
				colorActive: '#005A93'
			},
			title: {
				text: '',
				size: 12,
				h: 44,
				bg: '#fff',
				color: '#fff'
			},
			lineColor: '#E6E6E6',
			actives: [1],
			fixedOn: api.frameName
		}, function(ret, err) {
			if (ret) {
				if (ret.eventType == 'ok') {
					vm.sex = ret.selectedInfo[0].name;
					vm.updateUserInfo('sex', ret.selectedInfo[0].id)
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}


	// 修改出生日期
	function open_sel_birthday() {
		api.openPicker({
			type: 'date',
			title: '选择日期'
		}, function(ret, err) {
			if (ret) {
				var str = ret.year + '-' + ret.month + '-' + ret.day;
				// vm.info.birthday = str;
				get_data('api/user/updateUserInfo', {
					token: $api.getStorage('token'),
					birthday: str
				}, function(ret) {
					if (ret.status) {}
				})
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}

	function edit_avator(avatar) {
		vm.avatar = avatar
	}
</script>

</html>
